<!-- 导师评价 -->
<template>
    <div class="masterCheck">
        <h4>导师评价</h4>
        <div class="master clearfix">
            <img class="img-circle" :src="'/dist/img/user/avatar' + homework.user.avatarMsg.avatar + '.jpg'" :alt="homework.user.avatarMsg.username || '待评价'">
            <h5>{{ homework.user.avatarMsg.username }}</h5>
        </div>

        <div class="score-div clearfix">
            <ul class="clearfix score-ul">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="score">
                <input
                    v-if="zhuguan"
                    :class="{'smallFont': homework.user.masterCheck == '待评分'}"
                    type="text"
                    v-model="homework.user.masterCheck"
                    @keyup="fillScore(homework.user.masterCheck)">

                <p
                    v-if="!zhuguan"
                    :class="{'smallFont': homework.user.masterCheck == '待评分'}">
                    {{ homework.user.masterCheck }}
                </p>
            </div>

        </div>

        <div class="comment">
            <p v-if="!zhuguan">{{homework.user.comment}}</p>
            <textarea v-if="zhuguan" v-model="homework.user.comment" @keyup="this.update = true"></textarea>
        </div>
        <a v-if="update" class="submit" @click="masCheck()">提交评价</a>
    </div>

</template>

<style lang="sass">
    .masterCheck{
        .master{
            border:none;
            margin:0;
            img{
                width: 40px;
                height: 40px;
                float: left;
            }
            h5{
                font-size: 16px;
                // color: #333742;
                margin: 5px 20px;
                font-weight: bold;
                float: left;
            }
        }
        .score{
            color:#009688;
        }
        .comment{
            border:none;
            textarea{
                width:100%;
                border:none;
            }
        }
    }
</style>

<script>
    export default{
        data(){
            return {
                update:false,
            }
        },
        props:['homework', 'zhuguan'],
        methods:{
            fillScore(score) {
                this.update = true;
                var el = document.getElementsByClassName('masterCheck')[0];
                var scoreDiv = el.getElementsByClassName("score-div")[0];
                var li = scoreDiv.getElementsByTagName("li");
                if (Math.round(score) > 10 || Math.round(score) < 0) {
                    alert('评分范围：0 - 10');
                }else{
                    var roundScore = Math.round(score);
                    for (var i = 0; i < li.length; i++) {
                        li[i].style['background-color'] = '#d5d6d7';
                    }
                    for (var i = 1; i <= roundScore; i++) {
                        li[i-1].style['background-color'] = 'rgba(51, 153, 255,'+ i/10 + ')';
                    }
                }
            },
            masCheck(){
                var postObj = {
                    'homeworkName': this.homework.homeworkName,
                    'masterCheck': this.homework['user'].masterCheck,
                    'comment': this.homework['user'].comment,
                    'userid': this.homework.user.userid,
                }

                this.$http.post('/admin/work/masCheck', postObj).then(function (res) {
                    alert(res.data);
                }, function (err) {
                    alert('err: ' + err.status);
                });
            }
        }
    }

</script>
